---
section: Typography
title: List Style Type
slug: /docs/list-style-type/
---

# List Style Type

Utilities for controlling the style of a list.

<carbon-ad />

| React props            | CSS Properties             |
| ---------------------- | -------------------------- |
| `listStyleType={type}` | `list-style-type: {type};` |

## Usage

To create custom lists, use the `listStyleType={type}` utilities.

```jsx preview color=pink
<>
  <template preview>
    <x.div spaceY={8}>
      {['disc', 'decimal', 'circle', 'square', 'none'].map((listStyleType) => (
        <x.dl key={listStyleType} color="pink-700" overflow="hidden">
          <x.dt
            w={16}
            flexShrink={0}
            fontSize="sm"
            opacity={0.8}
            fontFamily="mono"
            mb={1}
          >
            listStyleType={listStyleType}
          </x.dt>
          <x.dd fontSize="xl" m={0}>
            <x.ul my={0} listStyleType={listStyleType}>
              <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
              <li>
                Assumenda, quia temporibus eveniet a libero incidunt suscipit
              </li>
              <li>
                Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
              </li>
            </x.ul>
          </x.dd>
        </x.dl>
      ))}
    </x.div>
  </template>
  {/* inline styles required to override smooth-doc */}
  <x.ul listStyleType="disc" style="list-style-type: disc">
    <li>Lorem ipsum ...</li>
  </x.ul>
  <x.ul listStyleType="decimal" style="list-style-type: decimal">
    <li>Lorem ipsum ...</li>
  </x.ul>
  <x.ul listStyleType="circle" style="list-style-type: circle">
    <li>Lorem ipsum ...</li>
  </x.ul>
  <x.ul listStyleType="square" style="list-style-type: circle">
    <li>Lorem ipsum ...</li>
  </x.ul>
  <x.ul listStyleType="none" style="list-style-type: none">
    <li>Lorem ipsum ...</li>
  </x.ul>
</>
```

## Responsive

To control the space between elements at a specific breakpoint, use responsive object notation. For example, adding the property `listStyleType={{ md: "disc" }}` to an element would apply the `listStyleType="disc"` utility at medium screen sizes and above.

```jsx
<x.div listStyleType={{ md: 'disc' }}>{/* ... */}</x.div>
```

For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.
